<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover" >
        <div class="user">
          <img :src="imgUrl" alt="用户头像" />
          <div class="userinfo">
            <p class="name">小肥</p>
            <p class="access">后台管理员</p>
          </div>
        </div>
        <div class="login-info">
           <p class>上次登录时间：<span>2021-12-27</span></p>
            <p class>上次登录地点：<span>广东-广州</span></p>
        </div>
      </el-card>
      <el-card shadow="hover"  style="height:522px; margin-top : 20px">
        <el-table :data="tableData">
          <!-- 展示表格  设置show-overflow-tooltip为一行显示上-->
          <el-table-column  show-overflow-tooltip v-for="(val,key) in tabelLabel" :key="key" :prop="key" :label="val"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card shadow="hover" v-for="item in countData" :key="item.name">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{background: item.color}"></i>
          <div class="detail">
            <p class="num">￥ {{item.value}}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
        <el-card shadow="hover">
          <echart style="height: 280px" :chartData="echartData.sale"></echart>
        </el-card>
      <div class="graph">
        <el-card shadow="hover">
          <echart style="height: 260px" :chartData="echartData.user"></echart>
        </el-card>
        <el-card shadow="hover">
          <echart style="height: 260px" :chartData="echartData.video"></echart>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>


<script>
import Echart from '../../components/Echart.vue'
export default {
  name: 'home',
  data() {
    return {
      imgUrl: require('../Home/img/01.png'),
      countData:[
        {
          name: '今日支付订单',
          value: 1234,
          icon:'success',
          color: '#2ec7c9'
        },
          {
          name: '今日收藏订单',
          value: 210,
          icon:'star-on',
          color: '#ffb980'
        },
          {
          name: '今日未支付订单',
          value: 14,
          icon:'s-goods',
          color: '#5ab1ef'
        },
        {
          name: '本月支付订单',
          value: 12340,
          icon:'success',
          color: '#2ec7c9'
        },
          {
          name: '本月收藏订单',
          value: 2100,
          icon:'star-on',
          color: '#ffb980'
        },
          {
          name: '本月未支付订单',
          value: 300,
          icon:'s-goods',
          color: '#5ab1ef'
        },
      ],
      orderData: [],
      tableData:[],
      //根据表格信息决定展示表格数据
      tabelLabel: {
        name: '课程',
        todayBuy: '今日购买',
        monthBuy: '本月购买',
        totalBuy: '总购买'
      },
      //里面装在我们所有的图表数据
      echartData:{
        sale: {
          xData: [],
          series: []
        },
        user: {
          xData: [],
          series: []
        },
        video: {
          series: []
        }
      }
    }
  },
  created() {
    //获取表单数据
    this. getTableData()
    //获取饼图数据
    this. getVideoData()
    //获取用户数据
    this.getUserData()
  },
 methods: {
    //2、获取表格信息
    getTableData() {
      this.$http.get('/home/getData')
        .then(res => {
          this.tableData = res.data.data.tableData
          // console.log(res.data.data.tableData);
          //折线图
          const saleData = res.data.data.saleData
          // console.log(saleData);
          this.echartData.sale.xData =saleData.selltime
          //第一部取出series中的name的部分建名
          const keyArray = Object.keys(saleData.selldata[0])
          keyArray.forEach(key => {
            this.echartData.sale.series.push({
              name: key === 'wechat' ? '小程序' : key,
              data: saleData.selldata.map(item => item[key]),
              type: 'line'
            })
          })
        })
    },
    //饼图
    getVideoData(){
      this.$http.get('/home/getData').then(
        res=>{
          // console.log(res.data.data.videoData);
          this.echartData.video.series.push({
            data: res.data.data.videoData,
            type:'pie'
          })
        }
      )
    },
    //用户柱状图
    getUserData(){
       this.$http.get('/home/getData').then(
         res=>{
           console.log(res.data.data.userData);
           const userData = res.data.data.userData
           this.echartData.user.xData = userData.time
           const keyArray = Object.keys(userData.num[0])
           keyArray.forEach(key =>{
             this.echartData.user.series.push({
               name: key,
               data: userData.num.map(item => item[key]),
               type: 'bar'
             })
           })
         }
       )
        
    }
  },
  components:{
    Echart
  }
}

</script>

<style lang="scss" scoped>
@import './home.scss';
</style>